import './class.scss'
import { Table, Pagination, Button, Tooltip, Input, message } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import SvgIcon from '@/components/SvgIcon'
import { useEffect, useState } from 'react'
import { reqAdminGetAllSchool, reqAddSchool, reqDelSchool } from '@/api/admin'

function Class() {
  const [inputData, setInputData] = useState('')
  const [pageSize, setPageSize] = useState(5)
  const [pageNO, setPageNO] = useState(1)
  const [classInfo, setClassInfo] = useState([])
  const [total, setTotal] = useState(1)

  const columns: any = [
    {
      title: '课程ID',
      width: 100,
      align: 'center',
      ellipsis: true,
      dataIndex: 'id',
    },
    {
      title: '课程名',
      ellipsis: true,
      align: 'center',
      dataIndex: 'schoolName',
    },
    {
      title: '删除',
      width: 200,
      key: 'action',
      align: 'center',
      render: (data: any) => (
        <Tooltip title="删除课程">
          <Button
            type="primary"
            danger
            onClick={() => {
              delSchool(data)
            }}
            shape="circle"
            icon={<DeleteOutlined />}
          ></Button>
        </Tooltip>
      ),
    },
  ]
  // 获取课程表
  const getAllSchool = async () => {
    const res: any = await reqAdminGetAllSchool({ pageNO, pageSize })
    if (res.code === 200) {
      const newRecords = res.data.records
        .map((item: any) => ({
          ...item,
          key: item.id,
        }))
        .sort((a: any, b: any) => a.id - b.id)
      setTotal(res.data.total)
      setClassInfo(newRecords)
    }
  }

  // 添加课程
  const addSchool = async () => {
    const res: any = await reqAddSchool({ schoolName: inputData })
    if (res.code === 200) {
      message.success('添加课程成功！')
      getAllSchool()
    }
  }

  // 删除课程
  const delSchool = async (data: any) => {
    const res: any = await reqDelSchool(data)
    if (res.code === 200) {
      getAllSchool()
      message.success('删除成功！')
    } else {
      message.error('删除失败！')
    }
  }

  const handleChange = (page: number, pageSize: number) => {
    setPageNO(page)
    setPageSize(pageSize)
  }

  useEffect(() => {
    getAllSchool()
  }, [pageNO, pageSize])

  // 点击添加课程按钮的回调
  const handleAddClass = () => {
    if (inputData) {
      addSchool()
      setInputData('')
    } else {
      message.warning('课程名称不能为空！')
    }
  }

  return (
    <div className="Class">
      <div className="addClass">
        <span>添加课程：</span>
        <Input
          className="addClass-input"
          size="large"
          value={inputData}
          onChange={(e) => setInputData(e.target.value)}
          onKeyDown={(e) => {
            e.key === 'Enter' && handleAddClass()
          }}
          addonAfter={
            <div onClick={handleAddClass}>
              <SvgIcon name="addClass" />
            </div>
          }
        ></Input>
      </div>
      <Table columns={columns} dataSource={classInfo} pagination={false} />
      <Pagination
        style={{ marginTop: '20px' }}
        pageSizeOptions={['5', '10', '15', '20']}
        showSizeChanger
        defaultPageSize={pageSize}
        onChange={handleChange}
        total={total}
        align="end"
      />
    </div>
  )
}

export default Class
